<!doctype html><head><meta charset="utf-8"></head><style>.mydoc_api_title{
    margin: 35px 0 0.8em;
}
.mydoc_api_title_a{
    font-size: 1.5em;
    text-decoration: none;
    color: #2c3e50;
    text-align: center;
}
.mydoc_api_title_a::before{
    content: '';
    display: block;
    margin-top: -40px;
    height: 40px;
    visibility: hidden;
}
.mydoc_api_title_h2{
    margin: 5px 0 8px;
    font-size: 22px;
    padding-bottom: 1em;
}
.mydoc_api_title_content{

}.mydoc_api_npm-info{
    line-height: 1.6em;
    margin: 1.2em 0 -1.2em;
    padding-bottom: 1.2em;
    position: relative;
    z-index: 1;
}.mydoc_p{
    line-height: 1.6em;
    margin: 1.2em 0 -1.2em;
    padding-bottom: 1.2em;
    position: relative;
    z-index: 1;
    color: #333;
}.mydoc_inline_code{
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}.mydoc_strong{
    font-weight: 600;
    color: #2c3e50;
}.mydoc_a{
    color: #42b983;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}.mydoc_h2{
    margin: 35px 0 0.8em;
}
.mydoc_h2_a{
    font-size: 1.5em;
    text-decoration: none;
    color: #2c3e50;
}
.mydoc_h2_a::before{
    content: '';
    display: block;
    margin-top: -40px;
    height: 40px;
    visibility: hidden;
}
.mydoc_h2_h2{
    margin: 5px 0 8px;
    border-bottom: 1px solid #ddd;
    font-size: 22px;
    padding-bottom: 1em;
}
.mydoc_h2_content{

}:not(.mydoc_li) + .mydoc_li, .mydoc_li:first-child{
    margin-top: 10px;
}
.mydoc_li + .mydoc_li{
    margin-top: -10px;
}

.mydoc_li{
    margin: 0;
    color: #34495e;
    margin-bottom: 10px;
    position: relative;
}.mydoc_span{
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
.mydoc_code{
    overflow-x: auto;
    position: relative;
    background-color: #f8f8f8;
    padding: 0;
    line-height: 1.1em;
    border-radius: 2px;
    margin: 1.2em 0;
    background-image: url('');
}
.mydoc_code_pre{
    padding: 1.2em 1.4em;
    line-height: 1.5em;
    margin: 0;
}.mydoc_h4{
    margin: 35px 0 0.8em;
}
.mydoc_h4_a{
    font-size: 1.2em;
    text-decoration: none;
    color: #2c3e50;
}
.mydoc_h4_a::before{
    content: '';
    display: block;
    margin-top: -20px;
    height: 20px;
    visibility: hidden;
}
.mydoc_h4_h4{
    margin: 5px 0 8px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    padding-bottom: 0.3em;
}
.mydoc_h4_content{

}.mydoc_h3{
    margin: 35px 0 0.8em;
}
.mydoc_h3_a{
    font-size: 1.3em;
    text-decoration: none;
    color: #2c3e50;
}
.mydoc_h3_a::before{
    content: '';
    display: block;
    margin-top: -30px;
    height: 30px;
    visibility: hidden;
}
.mydoc_h3_h3{
    margin: 5px 0 8px;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    padding-bottom: .6em;
}
.mydoc_h3_content{

}.mydoc_api{
    line-height: 16px;
    position: relative;
    z-index: 1;
    color: #333;
    margin-top: 10px;
}
.mydoc_api_describe {
    -webkit-box-sizing : border-box ;
            box-sizing : border-box ;
    position : relative ;
    padding : 24px 15px ;
    margin : 0px 0px 15px ;
    border-color : rgb(221, 221, 221) ;
    border-style : solid ;
    border-width : 1px ;
    -webkit-box-shadow : none ;
            box-shadow : none ;
    background-color : rgb(255, 255, 255) ;
    border-radius : 4px 4px 0px 0px ;
    color : rgb(51, 51, 51) ;
}
.mydoc_api_content {
    -webkit-box-sizing : border-box ;
            box-sizing : border-box ;
    margin : -16px 0px 15px ;
    padding : 9px 14px ;
    background-color : rgb(247, 247, 249) ;
    border : 1px solid rgb(225, 225, 232) ;
    border-radius : 0px 0px 4px 4px ;
    color : rgb(51, 51, 51) ;
}

.mydoc_api_table{
    margin : 15px 0px 0px ;
    padding : 0px ;
    border : 1px solid rgb(170, 170, 170) ;
    border-collapse : collapse ;
    width : 100% ;
    color : rgb(0, 0, 0) ;
    font-size : 14px ;
    background-color : rgb(253, 252, 248) ;
}

.mydoc_api_table tr{
    margin : 0px ;
    padding : 0px ;
    border : 0px ;
    background-color : rgb(255, 255, 255) ;
}
.mydoc_api_table tr:nth-child(odd){
    background-color : rgb(245, 245, 245) ;
}
.mydoc_api_table tr:nth-child(1){
    background-color : rgb(63, 63, 63);
}

.mydoc_api_table th{
    margin : 0px ;
    padding : 5px 15px 5px 6px ;
    border : 1px solid rgb(63, 63, 63) ;
    vertical-align : baseline ;
    background-color : rgb(63, 63, 63) ;
    text-align : left ;
    color : rgb(255, 255, 255) ;
    width : 123px ;
    word-break: break-all;
    font-weight: normal;
}

.mydoc_api_table td{
    margin : 0px ;
    padding : 6px 15px 6px 6px ;
    border : 1px solid rgb(170, 170, 170) ;
    vertical-align : text-top ;
    word-break: break-all;
}
.mydoc_api_table td{
    margin : 0px ;
    padding : 6px 15px 6px 6px ;
    border : 1px solid rgb(170, 170, 170) ;
    vertical-align : text-top ;
}

.mydoc{
    font-size: 14px;
    overflow: hidden;
}</style>
<article class='mydoc'>
    <div class="mydoc_api_title">
                    <a class="mydoc_api_title_a">
                        <h2 class="mydoc_api_title_h2">vue-event-util</h2>
                    </a>
                    <div class="mydoc_api_title_content">
                        
                    </div>
                </div><p class="mydoc_api_npm-info" align="center">
                <a href="https://www.npmjs.com/package/vue-event-util"><img src="https://img.shields.io/npm/v/vue-event-util.svg" alt="Version"></a>
                <a href="https://www.npmjs.com/package/vue-event-util"><img src="https://img.shields.io/npm/dm/vue-event-util.svg" alt="Downloads"></a>
                <a href="https://www.npmjs.com/package/vue-event-util"><img src="https://img.shields.io/npm/l/vue-event-util.svg" alt="License"></a>
            </p><p class="mydoc_p"> <code class="mydoc_inline_code">vue-event-util</code>，是一个Vue事件的扩展插件，为Vue的事件提供了如<strong class="mydoc_strong">函数节流（throttle）</strong>、<strong class="mydoc_strong">函数防抖（debounce）</strong>、<strong class="mydoc_strong">函数延时（delay）</strong> 等功能。<code class="mydoc_inline_code">vue-event-util</code>将<a class="mydoc_a" href="https://lodash.com/">lodash</a>的很多处理函数的工具函数加入到插件中，大家可用使用<code class="mydoc_inline_code">vue-event-util</code>提供的便携方法将其应用到Vue的事件中。</p><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">源码</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> <a class="mydoc_a" href="https://github.com/laden666666/vue-event-util">github</a>，<a class="mydoc_a" href="https://gitee.com/laden666666/vue-event-util">码云</a></p>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">功能</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <ul class="mydoc_li"><li> 0.对Vue的事件响应函数提供<strong class="mydoc_strong">函数防抖（throttle）</strong>、<strong class="mydoc_strong">函数节流（debounce）</strong>、<strong class="mydoc_strong">延时执行（delay）</strong> 等函数处理功能</li></ul><ul class="mydoc_li"><li> 1.对某控件<strong class="mydoc_strong">所有实例</strong>共享的函数进行<span class="mydoc_span">函数防抖</span>和<span class="mydoc_span">函数节流</span></li></ul><ul class="mydoc_li"><li> 2.对某控件<strong class="mydoc_strong">各个实例</strong>的函数进行<span class="mydoc_span">函数防抖</span>和<span class="mydoc_span">函数节流</span></li></ul><ul class="mydoc_li"><li> 3.对<strong class="mydoc_strong">列表渲染的控件绑定的函数</strong>进行<span class="mydoc_span">函数防抖</span>和<span class="mydoc_span">函数节流</span></li></ul><ul class="mydoc_li"><li> 4.实现防止按钮连击</li></ul><ul class="mydoc_li"><li> 5.实现降低事件响应频率</li></ul><ul class="mydoc_li"><li> 6.实现延时事件响应</li></ul>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">兼容性</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <table cellspacing="1" style="margin: 0 auto;font-size: 14px;background-color: #f9f9f9;color: #036;padding: 3px;border-radius: 4px;border: 1px solid rgba(220, 220, 220, .5);">
    <colgroup width="100" span="7" align="center"></colgroup>
    <tr style="height: 30px;">
        <th align="center">Android</td><th align="center">Firefox</td><th align="center">Chrome</td><th align="center">IE</td><th align="center">iPhone</td><th align="center">Edge</td><th align="center">Safari</td>
    </tr>
    <tr style="color: #000;line-height: 28px;font-weight: bold;">
        <td align="center" style="background-color: #60d848">>=4.4</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">>=9</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">√</td><td align="center" style="background-color: #60d848">√</td>
    </tr>
</table>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">例子</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> 防止按钮连击：<a class="mydoc_a" href="https://laden666666.github.io/vue-event-util/ButtonSafe.html">docs/ButtonSafe.html</a><a class="mydoc_a" href="./docs/ButtonSafe.html">源码</a></p><p class="mydoc_p"> 事件降频触发：<a class="mydoc_a" href="https://laden666666.github.io/vue-event-util/FrequencyReduction.html">docs/FrequencyReduction.html</a><a class="mydoc_a" href="./docs/FrequencyReduction.html">源码</a></p><p class="mydoc_p"> 事件延时触发：<a class="mydoc_a" href="https://laden666666.github.io/vue-event-util/Delay.html">docs/Delay.html</a><a class="mydoc_a" href="./docs/Delay.html">源码</a></p>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">插件解决的问题</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> 当我们对函数进行<strong class="mydoc_strong">柯里化</strong>、<strong class="mydoc_strong">函数节流</strong>、<strong class="mydoc_strong">函数防抖</strong>处理的时候，往往需要将原有函数以入参传入，并以返回函数的形式返回处理后的函数。如lodash库对函数防抖的实现：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse">fn <span class="token operator">=</span> _<span class="token punctuation">.</span><span class="token function">throttle</span><span class="token punctuation">(</span>fn<span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span></pre>
                </figure><p class="mydoc_p"> 但是这个处理对于Vue的template语法中的事件响应函数来说，实现起来很麻烦，我们以做<strong class="mydoc_strong">函数防抖</strong>为例，看看我们以往在Vue中是如何实现上述操作的。Vue的事件绑定有两种方法：<a class="mydoc_a" href="https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95">方法名绑定</a>和<a class="mydoc_a" href="https://cn.vuejs.org/v2/guide/events.html#%E5%86%85%E8%81%94%E5%A4%84%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95">内联处理器</a>。<strong class="mydoc_strong">内联处理器</strong>允许我们提供一个表达式处理事件，但表达式没有<strong class="mydoc_strong">记忆功能</strong>，因此无法实现如<strong class="mydoc_strong">函数节流</strong>、<strong class="mydoc_strong">函数防抖</strong>这样的功能。</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@clikc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_.throttle(fn, 1000)()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>函数节流<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span></pre>
                </figure><p class="mydoc_p"> 每一次点击都会执行一次_.throttle方法，所以上述代码是无法实现对事件的函数节流处理的。</p><p class="mydoc_p"> 另一种方法是先将函数进行处理，再通过方法名绑定或者内联处理器的方式绑定到Vue上面。</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@clikc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>函数节流<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    <span class="token keyword">export</span> deflaut <span class="token punctuation">{</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            fn<span class="token punctuation">:</span> _<span class="token punctuation">.</span><span class="token function">throttle</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token operator">...</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre>
                </figure><p class="mydoc_p"> 这样写也存在一个问题，就是所有控件公用一个节流函数，当多个控件需要单独做函数节流的话就没有办法了。而且对于列表渲染，如果列表的每一个控件都要单独做函数节流处理，这样就更麻烦了。</p><p class="mydoc_p"> 有时候我们甚至会借助watch来实现函数节流的功能。如：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@clikc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>函数节流<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    <span class="token keyword">export</span> deflaut <span class="token punctuation">{</span>
        <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'clickTime'</span><span class="token punctuation">,</span> _<span class="token punctuation">.</span><span class="token function">throttle</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        data<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            clickTime<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
        methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            fn<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>clickTime<span class="token operator">++</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre>
                </figure><p class="mydoc_p"> 方法是死的人是活的，我们肯定能找到更优雅的方式来做函数节流或者其他类似的事情。<code class="mydoc_inline_code">vue-event-util</code>就是为了解决这个事情而生的。</p>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">安装</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse">npm install vue<span class="token operator">-</span>event<span class="token operator">-</span>util</pre>
                </figure><p class="mydoc_p"> 然后在js中执行</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token keyword">import</span> vueEventUtil <span class="token keyword">from</span> <span class="token string">'vue-event-util'</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vueEventUtil<span class="token punctuation">)</span></pre>
                </figure><p class="mydoc_p"> 在浏览器环境中，直接将<strong class="mydoc_strong">vue-event-util.js</strong>文件引入即可。</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vue-event-util.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
    Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>vueEventUtil<span class="token punctuation">)</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre>
                </figure>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">使用</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> <code class="mydoc_inline_code">vue-event-util</code>提供了lodash的<strong class="mydoc_strong">delay</strong>、<strong class="mydoc_strong">throttle</strong>、<strong class="mydoc_strong">debounce</strong>等方法</p><ul class="mydoc_li"><li> delay: 延迟 wait 毫秒后调用 func</li></ul><ul class="mydoc_li"><li> debounce: 创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。</li></ul><ul class="mydoc_li"><li> throttle: 创建一个节流函数，在 wait 秒内最多执行 func 一次的函数</li></ul><p class="mydoc_p"> 三种函数具体用法可以参考<a class="mydoc_a" href="https://lodash.com/docs">lodash</a>。</p><div class="mydoc_h4">
                <a class="mydoc_h4_a">
                    <h4 class="mydoc_h4_h4">delay</h4>
                </a>
                <div class="mydoc_h4_content">
                    <div class="mydoc_api">
                <div class="mydoc_api_describe">
延迟 wait 毫秒后调用 callback</div>
                <div class="mydoc_api_content">
                    
                    
                    <p>参数</p>
                    <table class="mydoc_api_table">
                        <tr>
                            <th>参数名</th><th>参数类型</th><th>参数说明</th>
                        </tr>
                        <tr>
                            <td>callback</td><td>Function</td><td>延迟执行的函数</td>
                        </tr><tr>
                            <td>wait</td><td>number</td><td>延迟的时间，单位毫秒</td>
                        </tr>
                    </table>
                    
                    
                    
                    <p>返回值</p>
                    <table class="mydoc_api_table">
                        <tr>
                            <th>参数类型</th><th>参数说明</th>
                        </tr>
                        <tr>
                            <td>Function</td><td>处理后的函数</td>
                        </tr>
                    </table>
                    
                </div>
            </div>
                </div>
            </div><div class="mydoc_h4">
                <a class="mydoc_h4_a">
                    <h4 class="mydoc_h4_h4">debounce</h4>
                </a>
                <div class="mydoc_h4_content">
                    <div class="mydoc_api">
                <div class="mydoc_api_describe">
创建一个 debounce（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 callback 方法。</div>
                <div class="mydoc_api_content">
                    
                    
                    <p>参数</p>
                    <table class="mydoc_api_table">
                        <tr>
                            <th>参数名</th><th>参数类型</th><th>参数说明</th>
                        </tr>
                        <tr>
                            <td>callback</td><td>Function</td><td>需要做防抖函数</td>
                        </tr><tr>
                            <td>wait</td><td>number</td><td>延迟的时间，单位毫秒</td>
                        </tr><tr>
                            <td>options</td><td>object</td><td>选项对象</td>
                        </tr><tr>
                            <td>options.leading</td><td>boolean</td><td>指定调用在延迟开始前，默认false</td>
                        </tr><tr>
                            <td>options.maxWait</td><td>number</td><td>设置 func 允许被延迟的最大值</td>
                        </tr><tr>
                            <td>options.trailing</td><td>boolean</td><td>指定调用在延迟结束后，默认true</td>
                        </tr>
                    </table>
                    
                    
                    
                    <p>返回值</p>
                    <table class="mydoc_api_table">
                        <tr>
                            <th>参数类型</th><th>参数说明</th>
                        </tr>
                        <tr>
                            <td>Function</td><td>处理后的函数</td>
                        </tr>
                    </table>
                    
                </div>
            </div>
                </div>
            </div><div class="mydoc_h4">
                <a class="mydoc_h4_a">
                    <h4 class="mydoc_h4_h4">throttle</h4>
                </a>
                <div class="mydoc_h4_content">
                    <div class="mydoc_api">
                <div class="mydoc_api_describe">
创建一个节流函数，在 wait 秒内最多执行 callback 一次的函数</div>
                <div class="mydoc_api_content">
                    
                    
                    <p>参数</p>
                    <table class="mydoc_api_table">
                        <tr>
                            <th>参数名</th><th>参数类型</th><th>参数说明</th>
                        </tr>
                        <tr>
                            <td>callback</td><td>Function</td><td>需要做节流函数</td>
                        </tr><tr>
                            <td>wait</td><td>number</td><td>节流时间，单位毫秒</td>
                        </tr><tr>
                            <td>options</td><td>object</td><td>选项对象</td>
                        </tr><tr>
                            <td>options.leading</td><td>boolean</td><td>指定调用在节流开始前，默认true</td>
                        </tr><tr>
                            <td>options.trailing</td><td>boolean</td><td>指定调用在节流结束后，默认false（与lodash默认配置不同，主要是因为事件处理更常用trailing为false的情况，如防止按钮连击）</td>
                        </tr>
                    </table>
                    
                    
                    
                    <p>返回值</p>
                    <table class="mydoc_api_table">
                        <tr>
                            <th>参数类型</th><th>参数说明</th>
                        </tr>
                        <tr>
                            <td>Function</td><td>处理后的函数</td>
                        </tr>
                    </table>
                    
                </div>
            </div><p class="mydoc_p"> 这些方法可以通过3种方式对Vue控件的函数进行处理：</p><ul class="mydoc_li"><li> 1.全局函数</li></ul><ul class="mydoc_li"><li> 2.控件实例函数</li></ul><ul class="mydoc_li"><li> 3.列表渲染函数</li></ul>
                </div>
            </div><div class="mydoc_h3">
                <a class="mydoc_h3_a">
                    <h3 class="mydoc_h3_h3">全局函数</h3>
                </a>
                <div class="mydoc_h3_content">
                    <p class="mydoc_p"> <code class="mydoc_inline_code">vue-event-util</code>提供某控件<strong class="mydoc_strong">所有</strong>实例共享的函数进行上述函数处理，这种使用方法，相当于作用于控件原型上的函数，一旦方法进行了处理后，控件的每一个实例会共享处理后的方法。通过<code class="mydoc_inline_code">vue-event-util</code>上提供的这些全局处理方法，具体用法如下：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token keyword">import</span> eventUtil <span class="token keyword">from</span> <span class="token string">'vue-event-util'</span>
<span class="token keyword">export</span> deflaut <span class="token punctuation">{</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        delay<span class="token punctuation">:</span> eventUtil<span class="token punctuation">.</span><span class="token function">delay</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>argument<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token operator">...</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        throttle<span class="token punctuation">:</span> eventUtil<span class="token punctuation">.</span><span class="token function">throttle</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>argument<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token operator">...</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        debounce<span class="token punctuation">:</span> eventUtil<span class="token punctuation">.</span><span class="token function">debounce</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>argument<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token operator">...</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span></pre>
                </figure>
                </div>
            </div><div class="mydoc_h3">
                <a class="mydoc_h3_a">
                    <h3 class="mydoc_h3_h3">控件实例函数</h3>
                </a>
                <div class="mydoc_h3_content">
                    <p class="mydoc_p"> <code class="mydoc_inline_code">vue-event-util</code>在Vue实例的原型上提供了上述函数处理，使用原型上的方法去处理函数，处理后的结果是控件实例独享的，针对Vue事件绑定函数的方法不同，<code class="mydoc_inline_code">vue-event-util</code>提供两种不同的方法：</p><p class="mydoc_p"> 可以在方法里面使用$xxx函数里调用的方式，方法名绑定，如</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>方法里面调用vue-event-util处理函数<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>P</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>delay(count)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>delay2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>throttle(count)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>throttle2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>debounce(count)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>debounce2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>内联处理器里调用vue-event-util处理函数<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>P</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>$delay(method, 1000)(<span class="token punctuation">'</span>delay<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>delay<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>$throttle(method, 1000)(<span class="token punctuation">'</span>throttle<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>throttle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>$debounce(method, 1000)(<span class="token punctuation">'</span>debounce<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>debounce<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//方法里面调用vue-event-util的delay函数</span>
        <span class="token function">delay</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$delay</span><span class="token punctuation">(</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//方法里面调用vue-event-util的throttle函数</span>
        <span class="token function">throttle</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$throttle</span><span class="token punctuation">(</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//方法里面调用vue-event-util的debounce函数</span>
        <span class="token function">debounce</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$debounce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre>
                </figure><p class="mydoc_p"> 可以在方法里面调用vue-event-util函数：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">throttle</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment">//将函数真正的处理逻传入vue-event-util的$throttle函数里，实现对函数节流的效果</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$throttle</span><span class="token punctuation">(</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></pre>
                </figure><p class="mydoc_p"> 也可以在内联处理器里调用vue-event-util处理函数：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>$throttle(method, 1000)(<span class="token punctuation">'</span>throttle<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>throttle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre>
                </figure>
                </div>
            </div><div class="mydoc_h3">
                <a class="mydoc_h3_a">
                    <h3 class="mydoc_h3_h3">列表渲染函数</h3>
                </a>
                <div class="mydoc_h3_content">
                    <p class="mydoc_p"> 当出现列表循环的时候，如果希望每一个循环出的元素拥有自己的事件处理函数，可以给每个元素提供一个key，使得各个元素绑定的事件互不干扰，例：</p><figure class='mydoc_code'>
                    <pre class="mydoc_code_pre cm-s-eclipse"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>方法里面调用vue-event-util处理函数<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>P</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key in 5<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>delay(key, count)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>delay2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key in 5<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>throttle(key, count)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>throttle2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key in 5<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>debounce(key, count)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>debounce2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>内联处理器里调用vue-event-util处理函数<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>P</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key in 5<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>$delay(key, method, 1000)(<span class="token punctuation">'</span>delay<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>delay<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key in 5<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>$throttle(key, method, 1000)(<span class="token punctuation">'</span>throttle<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>throttle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key in 5<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>key<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>$debounce(key, method, 1000)(<span class="token punctuation">'</span>debounce<span class="token punctuation">'</span>)<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>debounce<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//方法里面调用vue-event-util的delay函数</span>
        <span class="token function">delay</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$delay</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//方法里面调用vue-event-util的throttle函数</span>
        <span class="token function">throttle</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$throttle</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">//方法里面调用vue-event-util的debounce函数</span>
        <span class="token function">debounce</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> parameter<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$debounce</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token punctuation">(</span>parameter<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre>
                </figure>
                </div>
            </div>
                    </div>
                </div><div class="mydoc_h2">
                    <a class="mydoc_h2_a">
                        <h2 class="mydoc_h2_h2">原理</h2>
                    </a>
                    <div class="mydoc_h2_content">
                        <p class="mydoc_p"> <code class="mydoc_inline_code">vue-event-util</code>是如何存对Vue绑定的函数实现<strong class="mydoc_strong">记忆</strong>呢？</p><p class="mydoc_p"> 将每一个需要处理的函数toString，然后和其他参数（key，wait，option）一起做一个hash，最后用这个hash值做key将处理后的函数缓存起来。这是一个享元模式，如果hash已经存在就从缓存里面取，如果不存在就对函数进行处理，再缓存。因为如果一个函数的key、wait、option都相同，那这个函数的hash值也相同，所以就可以缓存这个函数了。</p>
                    </div>
                </div>
</article>